<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    body{
				margin: 0px;
			}
			.scene{
				width: 600px;
				height: 300px;
				/* border: 2px solid red; */
				margin: 150px auto 0px;
				perspective: 800px;
			}
			.scene .box{
				width: 600px;
				height: 300px;
				/* background-color: yellow; */
				transition: all ease 1s;
				position: relative;
				transform-style: preserve-3d;
				animation: rotate 5s ease infinite;
			}
			.scene:hover .box{
				transform: rotateY(-300deg);
			}
			.box .item{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -100px;
				transform: rotateY(calc(var(--i) * 40deg)) translateZ(300px);
			}
			.box:hover{
				animation-play-state: paused;
			}
			@keyframes rotate{
				from{
					transform:rotateX(-10deg) rotateY(0deg);
				}
				to{
					transform:rotateX(-10deg) rotateY(-360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="scene">
			<div class="box">
				<div class="item" style="--i:0">
					<img src="img/instagram-01.jpg" width="200" />
				</div>
				<div class="item" style="--i:1">
					<img src="img/instagram-02.jpg" width="200" />
				</div>
				<div class="item" style="--i:2">
					<img src="img/instagram-03.jpg" width="200" />
				</div>
				<div class="item" style="--i:3">
					<img src="img/instagram-04.jpg" width="200" />
				</div>
				<div class="item" style="--i:4">
					<img src="img/instagram-05.jpg" width="200" />
				</div>
				<div class="item" style="--i:5">
					<img src="img/instagram-06.jpg" width="200" />
				</div>
				<div class="item" style="--i:6">
					<img src="img/instagram-01.jpg" width="200" />
				</div>
				<div class="item" style="--i:7">
					<img src="img/instagram-02.jpg" width="200" />
				</div>
				<div class="item" style="--i:8">
					<img src="img/instagram-03.jpg" width="200" />
				</div>
			</div>
		</div>
	</body>
</html>
